{% extends 'layout/basic.html' %}
{% load static %}
{% block title %}
    短信登录
{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/account.css' %}">
{% endblock %}
{% block content %}
    <div class="container">
        <div class="panel panel-default account">
            <div class="panel-heading title">短信登录</div>
            <div class="panel-body " style="padding-left: 30px; padding-right: 30px">
                <form method="post" novalidate id="smslogin">
                    {% csrf_token %}
                    {% for field in form %}
                        {% if field.name == 'code' %}
                            <div class="form-group clearfix">
                                <div><label for={{ field.id_for_label }}>{{ field.label }}</label></div>
                                <div class="col-md-6" style="position: relative;padding-left: 0;">
                                    {{ field }}
                                    <span class="errmsg"
                                          style="color: red;position: absolute;">{{ field.errors.0 }}</span>
                                </div>
                                <div class="col-md-6">
                                    <input type="button" id="getcode" class="btn btn-success " value="获取验证码">
                                </div>
                            </div>

                        {% else %}
                            <div class="form-group" style="position: relative">
                                <label for={{ field.id_for_label }}>{{ field.label }}</label>
                                {{ field }}
                                <span class="errmsg" style="color: red;position: absolute;">{{ field.errors.0 }}</span>
                            </div>
                        {% endif %}

                    {% endfor %}
                    <div class="form-group">
                        <button type="button" class="btn btn-primary btn-lg" id="smsloginbtn">登 录</button>
                          <div style="float: right;">
                                <a href="{% url 'login' %}" style="line-height: 100%;">使用帐号密码登录</a>
                            </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script>
        $(function () {
            smscode();
            smslogin();
        })

        // 获取验证码ajax
        function smscode() {
            $('#getcode').click(function () {
                $('.errmsg').empty();
                let phone = $('#id_phone').val();
                $.ajax({
                    url: '/send/sms/',
                    type: 'GET',
                    data: {
                        'phone': phone,
                        'type': 'login',
                    },
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            console.log(res.status)
                            let s = 60;
                            $('#getcode').prop('disabled', true).val('请等待' + s + '秒');
                            let timer = setInterval(function () {
                                if (s > 1) {
                                    s--;
                                    $('#getcode').val('请等待' + s + '秒');

                                } else {
                                    $('#getcode').val('获取验证码').attr('disabled', false);
                                    clearInterval(timer)
                                }
                            }, 1000)

                        } else {
                            $.each(res.errors, function (k, v) {
                                $('#id_' + k).next().text(v[0]);
                            })
                        }
                    }
                })
            })
        }

        // 验证码登录ajax
        function smslogin() {
            $('#smsloginbtn').click(function () {
                $('.errmsg').empty();
                $.ajax({
                    url: '/login/sms/',
                    type: 'POST',
                    data: $('#smslogin').serialize(),
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            location.href = res.data;
                        } else {
                            $.each(res.errors, function (k, v) {
                                $('#id_' + k).next().text(v[0]);
                            })
                        }
                    }
                })
            })
        }
    </script>
{% endblock %}